<template>
    <div class="shar_warp">
        <div class="shar_seek">
            <div class="cx">
                <el-input v-model="inword" placeholder="请输入内容" class="my_input"></el-input>
                <el-button type="primary" icon="el-icon-search" class="my_button">搜索</el-button>
            </div> 
        </div>
        <invit></invit>
      <div class="shar_page block">
            <el-pagination
                layout="prev, pager, next"
                :page-size = pageSize
                :current-page="currentPage"
                @current-change='ch'
                :total="number">
            </el-pagination>
      </div>
  </div>
</template>

<script>
import invit from '@/components/Invit.vue'
export default {
    data(){
        return{
            inword: '' ,        //输入框双向绑定数据 模糊查询
            number: 1000,       //数据总数，计算分页
            pageSize: 20,        //每页显示的资源数量
            currentPage: 1          //起始页为1用于请求页数
        }
    },
    components:{
        invit
    },
    methods:{
        getContent(){
        let newID = this.$route.query.type
          console.log(newID);
        },
        ch:function(currentPage){
            this.currentPage = currentPage      //点击页数，请求第几页数据
        }
    },
    created(){
      console.log('请求默认数据(前端)1处');
    },
    watch:{
        '$route'(to,from){
          if(this.$route.query.type === undefined){
            console.log('请求默认数据(前端)2处');

          }else{
            const keyWord = this.$route.query.type;
            console.log(keyWord);

          }
            
        }
    }
}
</script>

<style>
.my_input{
    border-radius: 4px 0 0 4px;
    width: 300px;
}
.shar_seek::after{
    content: '';
    display: block;
    clear: both;
}
.cx{
    float: right;
    margin-top: 8px;
    padding-right: 8px;
    margin-bottom: 18px;
}
.shar_page{
    float: right;
    padding: 8px 0; 
    margin: 18px 8px;
}
</style>